<script setup>
import { getCurrentInstance, ref } from 'vue';
// 导入pinia
import useStore from '@/store';
const { user } = useStore();
// 导入路由
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
const route = useRoute();
const { proxy } = getCurrentInstance();
// 判断验证码登录还是密码属性
const isCodeLogin = ref(false);
// 登录信息
const loading = ref(false);
// 登录注册表单信息
const formData = ref({
	username: 'admin',
	password: '123456',
	code: ''
});
const sendCodeTime = ref(60)
const countdownInterval = ref(null)
const isCountdownActive = ref(false)
const rules = ref({
	username: [{ required: true, message: "请输入手机号", trigger: ["blur", "input"] }],
	password: [{ required: true, trigger: ["blur", "input"], message: "请输入密码" }],
	code: [{ required: true, message: "请输入验证码", trigger: ["blur", "input"] }]
})
// 登录事件
const handlerLogin = async () => {
	// 判断是登陆还是注册
	proxy.$refs.formRef.validate(async (valid) => {
		if (valid) {
			loading.value = true;
			try {
				isCodeLogin.value ? await user.loginCode(formData.value) : await user.login(formData.value)
			} catch (err) { } finally {
				loading.value = false
			}
		}
	});
};
// 验证码开始
const startCountdown = async () => {
	try {
		if (!formData.value.username) return ElMessage.error("请输入手机号")
		await sendMesCode({ phone: formData.value.username })
		isCountdownActive.value = true;
		ElMessage.success('已发送验证码');
		countdownInterval.value = setInterval(() => {
			sendCodeTime.value--;
			if (sendCodeTime.value === 0) {
				clearInterval(countdownInterval.value);
				sendCodeTime.value = 60;
				isCountdownActive.value = false;
			}
		}, 1000);
	} catch (e) { }

}
</script>
<template>
	<div class="main h-full bg-#253137">
		<!-- 登录界面 -->
		<div class="login_pannel flex flex-col bg-#fff">
			<!-- logo -->
			<div class="flex items-center">
				<img src="https://t11.baidu.com/it/u=2012053630,2960869158&fm=58" class="w-30px h-30px">
				<div class="text-30px font-bold ml-10px mr-10px">威澳车居</div>
			</div>
			<div class="text-24px mt-26px c-#000;">登录你的账户</div>
			<!-- 登录表单 -->
			<el-form :model="formData" ref="formRef" class="mt-25px" :rules="rules">
				<!-- 手机号 -->
				<el-form-item prop="username">
					<el-input v-model="formData.username" placeholder="请输入你的手机号">
						<template #prefix>
							<img src="@/assets/images/photo.png?rul" class="w-20px" />
						</template>
					</el-input>
				</el-form-item>
				<!-- 验证码 -->
				<el-form-item v-if="isCodeLogin" prop="code">
					<el-input v-model="formData.code" placeholder="手机验证码">
						<template #prefix>
							<img src="@/assets/images/code.png?rul" class="w-20px" />
						</template>
						<template #suffix>
							<span class="c-#fb7701 mr-10px text-18px" v-if="isCountdownActive">{{ sendCodeTime }}秒</span>
							<span class="c-#fb7701 text-18px cursor-pointer" v-else @click="startCountdown">获取验证码</span>
						</template>
					</el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password" v-else>
					<el-input v-model="formData.password" placeholder="请输入你的密码" show-password>
						<template #prefix>
							<img src="@/assets/images/code.png?rul" class="w-20px" />
						</template>
					</el-input>
				</el-form-item>
				<el-form-item class="mt-30px">
					<el-button color="#fb7701" class="w-100% h-57px text-20px c-#fff rounded-14px" @click="handlerLogin"
						:loading="loading">登录</el-button>
				</el-form-item>
			</el-form>
			<!-- 底部功能 -->
			<div class="flex justify-between text-18px">
				<div class="c-#c1c1c1">还没有账户? 点击登录<span class="c-#fb7701">自动注册</span></div>
				<div class="c-#fb7701 cursor-pointer" @click="isCodeLogin = !isCodeLogin">{{ isCodeLogin ? '密码登录' : "验证码登录" }}
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped lang="scss">
@import url(./index.scss);
</style>
